<template>
        
<!-- custom-class="dialogNoFooter" -->
	<bs-dialog
		title="添加直播源"
		width="500px"
		v-model:dialogVisible="visible"
		v-model:confirmLoading="confirmLoading"
		destroy-on-close
		draggable
		@close="dialogClose"
		@confirm="confirm"
		:before-close="beforeClose"
		@open="open"
	>
		<div class="main">
			<el-form ref="formRef" :model="form" class="edit-actor-form" :rules="formRules" label-width="90px" label-position="right" size="small">
				<el-form-item label="素材名称" prop="materialName">
					<el-input
						v-model="form.materialName"
						autocomplete="off"
						show-word-limit
						style="width: 280px"
						placeholder="请输入"
						clearable
					></el-input>
				</el-form-item>
                <el-form-item label="直播源地址" prop="materialUrl">
					<el-input
						v-model="form.materialUrl"
						autocomplete="off"
						show-word-limit
						style="width: 280px"
						placeholder="请输入"
						clearable
					></el-input>
				</el-form-item>
			</el-form>
		</div>
	</bs-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
const emit = defineEmits(['update:visible', 'update','add']);
const formRef = ref();
let props = defineProps({
	visible: {
		type: Boolean,
		default: false,
	},
    queryData:{
        type:Object,
        default:()=>{}
    }
});
const state = reactive({
	confirmLoading: false,
	form: {
        materialName:'',
		materialUrl: '',
	},
	formRules: {
		materialName: [{ required: true, message: '请输入素材名称' }],
		materialUrl: [{ required: true, message: '请输入直播源地址' }],
	},
});
let { form, confirmLoading, formRules } = toRefs(state);



// 弹窗打开执行事件
const open = () => {

};
// 弹窗确认
const confirm = () => {
	formRef.value.validate( async (valid:any) => {
		if (valid) {
            // let params = {
            //     ...props.queryData,
            //     ...form.value
            // }
            // const res :any = await contentApi.liveAdd(params)
            // if(res.code == '200'){
            //     dialogClose()
            //     let file = {
            //         name:res.data.materialName,
            //         size:0,
            //         width:'',
            //         height:'',
            //         duration:''
            //     }
            //     emit('update',file)
            // }
		}
	});
};

// dialog关闭执行
const dialogClose = () => {
    formRef.value && formRef.value.resetFields()
	emit('update:visible', false);
};
// beforeClose:关闭前的回调，会暂停 Dialog 的关闭
const beforeClose = (done: any) => {
	if (confirmLoading.value) return ElMessage('当前正在执行确认过程，请勿关闭');
	done();
};
</script>
<style lang="scss" scoped></style>


